<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(90, 194, 255, 1);
            min-height: 100vh;
        }

        .header {
            z-index: 999;
            position: fixed;
            top: 0;
            width: 100%;
            height: 44px;
            background: rgba(90, 194, 255, 1);
            box-sizing: content-box;
        }

        header {
            height: 44px;
            box-sizing: content-box;
        }

        .right-btn {
            position: relative;
            width: 22px;
            height: 22px;
            margin-right: 20px;
        }

        .dot::after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            width: 9px;
            height: 9px;
            background: rgba(226, 83, 83, 1);
            border-radius: 50%;
        }

        .m-user-mod {
            padding: 15px;
            margin: 0 20px;
            margin-bottom: 15px;
            background-image: url("../../image/ui/bg_1.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            box-shadow: 0px 7px 26px 0px rgba(0, 161, 255, 0.4);
            border-radius: 13px 36px 13px 13px;
        }

        .o-user-data {
            position: relative;
            padding-bottom: 15px;
        }

        .o-user-data::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgba(231, 109, 0, 0.2);
            transform: scaleY(0.5);
        }

        .c-user-avatar {
            width: 52px;
            height: 52px;
            min-width: 52px;
            margin-right: 14px;
            border-radius: 50%;
            overflow: hidden;
        }

        .o-user-flexbox {
            height: 52px;
        }

        .c-user-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 16px;
            font-weight: bold;
            color: rgba(25, 25, 25, 1);
        }

        .c-user-edit {
            min-width: 16px;
            margin-right: 15px;
            width: 16px;
            height: 15px;
            margin-left: 9px;
        }

        .c-user-city {
            font-size: 14px;
            font-weight: 400;
            color: rgba(103, 103, 103, 1);
        }

        .c-user-gender {
            width: 12px;
            height: 12px;
            margin-left: 8px;
        }

        .o-user-order {
            padding-top: 14px;
        }

        .c-user-order-title {
            font-size: 14px;
            font-weight: bold;
            color: rgba(25, 25, 25, 1);
        }

        .c-user-order-arrow {
            width: 15px;
            height: 15px;
        }

        .o-user-order-types {
            overflow: visible;
            padding-top: 16px;
            margin-left: -15px;
            margin-right: -15px;
        }

        .o-user-order-type {
            position: relative;
            width: 25%;
            text-align: center;
            overflow: visible;
        }

        .c-user-order-icons {
            display: block;
            width: 26px;
            height: 26px;
            margin: 0 auto 7px auto;
        }

        .c-user-order-typename {
            font-size: 12px;
            font-weight: 400;
            color: rgba(231, 109, 0, 1);
        }

        .c-user-order-tips {
            position: absolute;
            top: -8px;
            left: 50%;
            height: 15px;
            padding: 0 5px;
            background: rgba(226, 83, 83, 1);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 17px;
            text-align: center;
        }

        .m-list-mod {
            margin: 0 20px;
            padding: 15px 18px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
            border-radius: 13px;
            margin-bottom: 15px;
        }

        .o-list-item {
            height: 50px;
        }

        .c-list-item-icon {
            width: 18px;
            height: 18px;
            min-width: 18px;
            margin-right: 12px;
        }

        .o-list-item-flexbox {
            height: 50px;
        }

        .o-list-item:last-child .o-list-item-flexbox {
            border-bottom: 0;
        }

        .c-list-item-title {
            height: 18px;
            font-size: 15px;
            font-weight: bold;
            color: rgba(25, 25, 25, 1);
            line-height: 18px;
        }

        .c-list-item-arrow {
            width: 17px;
            height: 16px;
        }

        .c-border-bottom-less {
            position: relative;
        }

        .c-border-bottom-less::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: rgb(212, 212, 212);
            transform: scaleY(0.5);
        }

        .user-highlight {
            font-size: 13px;
            color: #E76D00;
        }

        .copyright {
            margin: 15px;
            text-align: center;
            font-size:12px;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:20px;
            letter-spacing:1px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <header class="header" data-flex="main:right cross:center">
            <div class="right-btn" v-if="memberType == 2" @click="scanQrcode()">
                <img src="../../image/ui/scanning.png" alt="">
            </div>
        </header>
        <header></header>
        <div class="m-user-mod">
            <div class="o-user-data" v-if="user.custId" data-flex @click="user.fn">
                <img class="c-user-avatar" :src="user.info.icon" alt="">
                <div class="o-user-flexbox" data-flex-box="1" data-flex="cross:center">
                    <div>
                        <div style="margin-bottom: 9px;" data-flex="cross:center">
                            <span class="c-user-name">{{ user.info.nickName }}</span>
                            <img class="c-user-edit" src="../../image/ui/edit.png" alt="">
                        </div>
                        <div data-flex="cross:center">
                            <span class="c-user-city">{{ user.info.schoolAddress }}</span>
                            <img class="c-user-gender"
                                :src="user.info.gender == 1 ? '../../image/ui/man.png' : '../../image/ui/woman.png'"
                                alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="o-user-data" v-else data-flex @click="toLogin()">
                <img class="c-user-avatar" src="../../image/ui/stu_def.png" alt="">
                <div class="o-user-flexbox" data-flex-box="1" data-flex="cross:center">
                    <div>
                        <div style="margin-bottom: 9px;" data-flex="cross:center">
                            <span class="c-user-name">游客</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="o-user-order">
                <div data-flex="main:justify cross:center" @click="order.fn(0)">
                    <div class="c-user-order-title">我的订单</div>
                    <img class="c-user-order-arrow" src="../../image/ui/arrow_right.png" alt="">
                </div>
                <div class="o-user-order-types" data-flex="main:justify">
                    <div v-for="item,index in order.names" class="o-user-order-type" @click="order.fn(order.codes[index])">
                        <div class="c-user-order-tips" v-if="order.counts[index]">
                            {{ order.counts[index]|foramteCount }}</div>
                        <img class="c-user-order-icons" :src="'../../image/ui/order_'+(index+1)+'.png'" alt="">
                        <div class="c-user-order-typename">{{item}}</div>
                    </div>
                </div>
            </div> -->
        </div>
        <div class="m-list-mod">
            <div class="o-list-item" v-for="item,index in list" data-flex="cross:center" @click="handleList(item)">
                <img class="c-list-item-icon" :src="item.data.icon" alt="" />
                <div class="o-list-item-flexbox" :class="index !== list.length -1 ? 'c-border-bottom-less' : ''"
                    data-flex-box="1" data-flex="main:justify cross:center">
                    <div class="c-list-item-title">{{ item.data.text }}</div>
                    <img class="c-list-item-arrow" src="../../image/ui/arrow_right_2.png" alt="" />
                </div>
            </div>
        </div>
        <div class="m-list-mod">
            <div class="o-list-item" v-for="item,index in list2" data-flex="cross:center" @click="handleList(item)">
                <img class="c-list-item-icon" :src="item.data.icon" alt="" />
                <div class="o-list-item-flexbox" :class="index !== list2.length -1 ? 'c-border-bottom-less' : ''"
                    data-flex-box="1" data-flex="main:justify cross:center">
                    <div class="c-list-item-title">{{ item.data.text }}</div>
                    <img class="c-list-item-arrow" src="../../image/ui/arrow_right_2.png" alt="" />
                </div>
            </div>
        </div>
        <div class="copyright">Copyright © 2020<br>广天教育科技公司版权所有</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, custId = '', memberType = '';
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        memberType = USER.Get('memberType', true);
        fnInit();
        api.addEventListener({
            name: 'updateUserInfo'
        }, function () {
            updateUserInfo();
        });
        // 用户登录后根据不同的身份显示不同的列表, 已解决
        api.addEventListener({
            name: 'loginStatus'
        }, function() {
            updateUserInfo();
            getMallToken();
            updateList();
            getOrderCount();
        });
        // 教师扫码登录后台，扫码成功
        api.addEventListener({
            name: 'scanTeacherCode'
        }, function(ret) {
            fnOpenAlert({
                alertType: 24,
                alertConfirmFn: 'fnTeacherScanLogin("'+ ret.value.code +'");'
            });
        })
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                user: {
                    fn: function () {
                        if (userIsLogin()) {
                            fnOpenPublicWin('个人资料', 'teacher/user_info', {
                                isBtn: true,
                                btnName: '保存',
                                headerFn: 'headerFn'
                            })
                        }
                    },
                    custId: custId,
                    memberType: memberType,
                    info: {}
                },
                // 订单模块
                order: {
                    fn: function (status) {
                        
                        // if (userIsLogin()) {
                        //     fnOpenPublicWin('我的订单', 'teacher/order', {
                        //         status: status
                        //     })
                        // }
                    },
                    counts: [0, 0, 0, 0],
                    codes: [12, 2, 3, 20],
                    names: ['待支付', '待发货', '待收货', '退款/售后']
                },
                list: [
                    {
                        to: 'teacher/video_order',
                        param: '',
                        data: {
                            text: '视频订单',
                            icon: '../../image/ui/video.png'
                        }
                    },
                    {
                        to: 'teacher/my_collect',
                        param: '',
                        data: {
                            text: '我的收藏',
                            icon: '../../image/ui/collect.png'
                        }
                    },
                    {
                        to: 'teacher/my_song',
                        param: '',
                        data: {
                            text: '我的歌曲',
                            icon: '../../image/ui/song.png'
                        }
                    },
                    {
                        to: 'teacher/my_upload',
                        param: {
                            isBtn: true,
                            btnName: '管理',
                            headerFn: 'headerFn'
                        },
                        data: {
                            text: '我的上传',
                            icon: '../../image/ui/upload.png'
                        }
                    },
                    {
                        to: 'teacher/my_integral',
                        param: '',
                        data: {
                            text: '我的积分',
                            icon: '../../image/ui/integral.png'
                        }
                    },
                    {
                        to: 'teacher/my_money',
                        param: {
                            isBtn: true,
                            btnName: '管理提现账户',
                            headerFn: 'headerFn'
                        },
                        data: {
                            text: '我的余额',
                            icon: '../../image/ui/money.png'
                        }
                    }
                ],
                list2: [
                    {
                        to: 'teacher/my_address',
                        param: {
                            isBtn: true,
                            btnName: '新增',
                            headerFn: 'headerFn'
                        },
                        data: {
                            text: '收货地址管理',
                            icon: '../../image/ui/address.png'
                        }
                    },
                    {
                        to: 'teacher/setup',
                        param: '',
                        data: {
                            text: '设置',
                            icon: '../../image/ui/setup.png'
                        }
                    },
                    {
                        to: 'teacher/about',
                        param: {},
                        data: {
                            text: '关于我们',
                            icon: '../../image/ui/about.png'
                        }
                    },
                    {
                        to: 'teacher/account_management',
                        param: '',
                        data: {
                            text: '账号管理',
                            icon: '../../image/ui/account.png'
                        }
                    },
                    {
                        to: 'teacher/question',
                        param: '',
                        data: {
                            text: '常见问题',
                            icon: '../../image/ui/question.png'
                        }
                    }
                ]
            },
            filters: {
                foramteCount: function (sender) {
                    return sender > 99 ? '···' : sender
                }
            }
        });
        updateList();
        updateUserInfo();
        getMallToken();
    }

    // 获取商城token
    function getMallToken() {
        var params = {
            custId: USER.Get('custId', true)
        };
        // console.error(typeof params.custId + '==mine=='+ params.custId);
        if(!params.custId) return;
        var callback = function(data) {
            var authorization = data.tokenHead + data.token;
            USER.Set({'authorization': authorization});
            getOrderCount();
        };
        MALLPOST('single/home/getToken', params, callback);
    }

    // 更新用户信息
    function updateUserInfo() {
        custId = USER.Get('custId', true);
        memberType = USER.Get('memberType', true);
        vm.user.custId = custId;
        if (!custId) return;
        var postData = {};
        $S.POST("apiTbAppUser/findUserBasic", postData, function (ret, err) {
            if (ret && ret.status == "200") {
                var data = ret.data;
                USER.Set({
                    phone: data.phone,
                    schoolId: data.schoolId,
                    integration: data.integration,
                    weixinOpenid: data.weixinOpenid
                });
                vm.user.info = data;
                USER.Set({"userIcon": data.icon, "userName": data.nickName});
                initMta(data.schoolName || '未知', memberType == 1 ? '学生' : '老师');
            }
        })
    }

    // 统计
    function initMta(schoolName, memberType) {
        var umAnalytics = api.require('umAnalytics');
        umAnalytics.init({
          debugMode: false
        }, function(ret, err) {});

        umAnalytics.profileSignInWithPUID({
            userID: custId,
            provider: '学校名称-'+schoolName+',用户类型-'+memberType
        },function(ret,err){});
        
        // var mta = api.require('tencentCloudMta');
        // // 初始化统计
        // mta.init({
        //     reportStrategy: 1
        // }, function(ret, err) {
        //     console.error(JSON.stringify(ret)+'====mta===='+ new Date().getTime());
        //     mta.setUserProperty({
        //         user: {
        //             schoolName: schoolName,
        //             memberType: memberType
        //         }
        //     }, function(ret, err) {
        //         console.error(JSON.stringify(ret)+ '==setUserProperty===' + new Date().getTime());
        //     });
        // });
        // mta.startMonitor(function (ret, err) {

        // });
    }

    // 切换不同的列表
    function updateList() {
        if(USER.Get('memberType', true) == 1) {
            vm.list = [
                {
                    to: 'teacher/video_order',
                    param: '',
                    data: {
                        text: '视频订单',
                        icon: '../../image/ui/video.png'
                    }
                },
                {
                    to: 'teacher/my_hb',
                    param: '',
                    data: {
                        text: '我的绘本',
                        icon: '../../image/ui/my_hb.png'
                    }
                },
                {
                    to: 'teacher/my_collect',
                    param: '',
                    data: {
                        text: '我的收藏',
                        icon: '../../image/ui/collect.png'
                    }
                },
                {
                    to: 'teacher/my_song',
                    param: '',
                    data: {
                        text: '我的歌曲',
                        icon: '../../image/ui/song.png'
                    }
                },
                {
                    to: 'teacher/my_money',
                    param: {
                        isBtn: true,
                        btnName: '管理提现账户',
                        headerFn: 'headerFn'
                    },
                    data: {
                        text: '我的余额',
                        icon: '../../image/ui/money.png'
                    }
                }
            ]
        } else {
            vm.list = [
                {
                    to: 'teacher/video_order',
                    param: '',
                    data: {
                        text: '视频订单',
                        icon: '../../image/ui/video.png'
                    }
                },
                {
                    to: 'teacher/my_hb',
                    param: '',
                    data: {
                        text: '我的绘本',
                        icon: '../../image/ui/my_hb.png'
                    }
                },
                {
                    to: 'teacher/my_courseware',
                    param: '',
                    data: {
                        text: '我的课件',
                        icon: '../../image/ui/my_kj.png'
                    }
                },
                {
                    to: 'teacher/my_collect',
                    param: '',
                    data: {
                        text: '我的收藏',
                        icon: '../../image/ui/collect.png'
                    }
                },
                {
                    to: 'teacher/my_song',
                    param: '',
                    data: {
                        text: '我的歌曲',
                        icon: '../../image/ui/song.png'
                    }
                },
                {
                    to: 'teacher/my_upload',
                    param: {
                        isBtn: true,
                        btnName: '管理',
                        headerFn: 'headerFn'
                    },
                    data: {
                        text: '我的上传',
                        icon: '../../image/ui/upload.png'
                    }
                },
                {
                    to: 'teacher/my_integral',
                    param: '',
                    data: {
                        text: '我的积分',
                        icon: '../../image/ui/integral.png'
                    }
                },
                {
                    to: 'teacher/my_money',
                    param: {
                        isBtn: true,
                        btnName: '管理提现账户',
                        headerFn: 'headerFn'
                    },
                    data: {
                        text: '我的余额',
                        icon: '../../image/ui/money.png'
                    }
                }
            ]
        }
    }

    // 打开登录页面
    function toLogin() {
        fnOpenWin({
            name: 'login',
            url: '../login/login.html'
        })
    }

    function handleList(param) {
        if (param.data.text == '设置' ||
            param.data.text == '关于我们' ||
            param.data.text == '常见问题' ||
            param.data.text == '视频订单' ||
            userIsLogin()) {
            fnOpenPublicWin(param.data.text, param.to, param.param);
        }
    }

    // 扫描二维码
    function scanQrcode() {
        fnOpenScanner(2);
    }

    // 确认扫码登录教师端后台
    function fnTeacherScanLogin(code) {
        var params = {
            codeValue: code,
            phone: vm.user.info.phone
        };
        var callback = function() {
            fnToast('登录成功');
        };
        POST('backUser/saveCodeLoginValue', params, callback);
    }

    // 获取订单数量
    function getOrderCount() {
        console.log(1);
        var params = {};
        var callback = function(data) {
            var count = data.count;
            vm.order.counts = [count.status0, count.status1, count.status2, count.status5];
        };
        MALLGET('single/oms/order/getorderstatusnum', params, callback);
    }

    // 退出登录
    function quitLogin() {
        vm.user.custId = '';
        vm.order.counts = [0,0,0,0];
        api.execScript({
            name: 'main',
            frameName: 'tab_message',
            script: 'clearAll()'
        });
        api.execScript({
            name: 'main',
            frameName: 'tab_index',
            script: 'resetNav()'
        });
    }
</script>

</html>